<template>
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <!-- table -->
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="advice" show-overflow-tooltip label="反馈内容">
        </el-table-column>
        <el-table-column prop="content" label="相关图片" min-width="180">
          <template slot-scope="scope">
            <el-image v-for="(item,index) in scope.row.picList" :key="index"
                      @click="_previewImg(index,scope.row.picList)"
                      style="width: 100px; height: 100px;margin-right: 15px;"
                      :src="constUrl + item.url">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="反馈时间" width="180">
          <template slot-scope="scope">
            {{scope.row.createTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column prop="unitName" show-overflow-tooltip label="反馈单位" min-width="120">
        </el-table-column>
        <el-table-column prop="userName" show-overflow-tooltip label="反馈人" width="120">
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="total">
      </el-pagination>
    </div>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>

<script>
import {
  feedbackList
} from '@/services/model/investigation'
import PictureViewer from '@/components/picture-viewer/index-name';
import Format from '@/utils/format'
import constUrl from '@/services/env'
// form表单校验规则
const RULES = {
  // name: {
  //   required: true,
  //   message: '请输入标识'
  // },
  title: {
    required: true,
    message: '请输入标题'
  },
}
export default {

  components: {
    PictureViewer
  },
  data() {
    return {
      constUrl,
      form: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      rules: RULES, // 表单校验的规则
      tableList: [],
      isShowDialog: false, // 是否显示弹窗
      currentRow: {
        buildUnitList: []
      },
      buildUnitSelectList: [],
    }
  },
  computed: {
    // 弹窗的title
    dialogTitle() {
      return this.currentRow.id ? '编辑通告' : '新增通告'
    },
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer))
    },
  },
  methods: {
    // 查看大图
    _previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls))
      urlList.map(x => {
        x.url = this.constUrl + x.url
        return x
      })
      // 显示照片查看器
      this.$refs.imageViewer.showViewer(urlList, index)
    },

    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    // 表单提交
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitData()
        }
      })
    },
    /**
     * row  当前操作行的对象
     */
    handleEdit(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    async queryList() {
      let res = await feedbackList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.total = Number(res.data?.total)
      // console.log(this.tableList)
    },
  },
  mounted() {
  },
  activated() {
    this.queryList()
  }
}
</script>

<style lang="less" scoped>
</style>
